<template>
  <div class="wrap">
    <div class="title">
      <div>交易管理</div>
      <div></div>
      <div>我的訂單</div>
    </div>
    <div class="content">
      <div class="choose">
        <div :class="showType == 0?'select':'unselect'" @click="changeorder(0)">全部</div>
        <div :class="showType == 1?'select':'unselect'" @click="changeorder(1)">待付款</div>
        <div :class="showType == 2?'select':'unselect'" @click="changeorder(2)">待發貨</div>
        <div :class="showType == 3?'select':'unselect'" @click="changeorder(3)">待收貨</div>
        <div :class="showType == 4?'select':'unselect'" @click="changeorder(4)">待評價</div>    
        <div :class="showType == 5?'select':'unselect'" @click="changeorder(5)">退款</div>
        <div :class="showType == 6?'select':'unselect'" @click="changeorder(6)">已退款</div>
      </div>
    </div>
    <div>
      <div class="purchese" v-for="(item,index) in list" :key="index" @click="btn(item.orderStatus,item.id,item)">
        <div class="purchesetop">
          <div>下單時間 : {{item.addTime}} &nbsp;&nbsp; 訂單號 ：{{item.orderSn}}</div>
        </div>
        <div class="purchesebottom" v-for="(items,indexs) in item.fldGoods.orderGoodsVo" v-if="item.fldGoods.orderGoodsVo.length != 0" :key='"indext"+indexs'>
          
          <div class="purimg"><img :src="items.picUrl" alt=""></div>
          <div class="purnumber">
            <div>{{items.goodsName}}</div>
            <div>x{{items.number}}</div>
          </div>
          <div class="purpay" v-if="indexs == 0">非冷凍(運費:{{item.fldGoods.freight}})</div>
          <div class="purpay" v-if="indexs != 0"></div>
          <div class="purpay" v-if="indexs == 0">{{orderList[item.orderStatus-1]}}  </div>
          <div class="purpay" v-if="indexs != 0"></div>
          <div class="purlinepay">
            <div>${{items.number * items.price}}</div>
            <div>(含運費：${{item.freightPrice}})</div>
            <div>{{item.payTypeText}}</div>
          </div>
          <div class="purlinepays right_list" v-if="indexs != 0">

          </div>
          <div class="purlinepays right_list"  v-if="indexs == 0">
            <div class="time" v-if="item.handleOption.pay"> 
              <img v-if='item.payType != 3' src="@/assets/time.png" alt="">
              <div v-if='item.payType != 3'>
                  <count-down 
                    :currentTime="item.newtime"
                    :startTime="item.startime"
                    :endTime="item.endtime"
                  >
                  </count-down>
                  <!-- <count-down v-on:end_callback="countDownE_cb()"
                :currentTime="currentTime"
                :startTime="startTime"
                :endTime="endTime"
                :tipText="'距離訂單開始還有'"
                :tipTextEnd="'距離訂單關閉還剩'"
                :endText="'訂單已關閉'"
                :dayTxt="'天'"
                :hourTxt="'小時'"
                :minutesTxt="'分鐘'"
                :secondsTxt="'秒'">
</count-down> -->
                </div>
            </div>
                <div style="color:#E43A3C" v-if="item.handleOption.pay && item.payType != 3"> 立即支付 </div>
                <div style="color:#E43A3C" v-if="item.handleOption.pay && item.payType == 3 && item.atmPayStatus != 1"> 上傳付款記錄 </div>
                <div style="color:#666666" v-if="item.handleOption.cancel">取消訂單</div>
                <div style="color:#E43A3C" v-if="item.handleOption.comment">評價商品</div>
                <div style="color:#E43A3C" v-if="item.handleOption.confirm">確認收貨</div>
                <div style="color:#666666">查看詳情</div>
                <div style="color:#E43A3C" v-if="item.handleOption.refund">申請退款</div>
            
          </div>
        </div>

        <div class="purchesebottom" v-for="(items,indexs) in item.ldGoods.orderGoodsVo" v-if="item.ldGoods.orderGoodsVo.length != 0" :key='indexs'>
          
          <div class="purimg"><img :src="items.picUrl" alt=""></div>
          <div class="purnumber">
            <div>{{items.goodsName}}</div>
            <div>x{{items.number}}</div>
          </div>
          <div class="purpay" v-if="indexs == 0">冷凍(運費:{{item.ldGoods.freight}})</div>
          <div class="purpay" v-if="indexs != 0"></div>
          <div class="purpay" v-if="indexs == 0">
            <!-- <span v-if="item.orderStatusText == 待發貨">待發貨</span>
            <span v-if="item.orderStatusText == '待付款'">待付款</span> -->
            {{orderList[item.orderStatus-1]}}
            
            </div>
          <div class="purpay" v-if="indexs != 0"></div>
          <div class="purlinepay">
            <div>${{items.number * items.price}}</div>
            <div>(含運費：${{item.freightPrice}})</div>
            <div>{{item.payTypeText}}</div>
          </div>
          <div class="purlinepays right_list" v-if="indexs != 0">

          </div>
          <div class="purlinepays right_list"  v-if="indexs == 0">
            <div class="time" v-if="item.handleOption.pay"> 
              <img v-if='item.payType != 3' src="@/assets/time.png" alt="">
              <div v-if='item.payType != 3'>
                  <count-down 
                    :currentTime="item.newtime"
                    :startTime="item.startime"
                    :endTime="item.endtime"
                  >
                  </count-down>
                  <!-- <count-down v-on:end_callback="countDownE_cb()"
                :currentTime="currentTime"
                :startTime="startTime"
                :endTime="endTime"
                :tipText="'距離訂單開始還有'"
                :tipTextEnd="'距離訂單關閉還剩'"
                :endText="'訂單已關閉'"
                :dayTxt="'天'"
                :hourTxt="'小時'"
                :minutesTxt="'分鐘'"
                :secondsTxt="'秒'">
</count-down> -->
                </div>
            </div>
                <div style="color:#E43A3C" v-if="item.handleOption.pay && item.payType != 3"> 立即支付 </div>
                <div style="color:#E43A3C" v-if="item.handleOption.pay && item.payType == 3 && item.atmPayStatus != 1">  上傳付款記錄  </div>
                <div style="color:#666666" v-if="item.handleOption.cancel">取消訂單</div>
                <div style="color:#E43A3C" v-if="item.handleOption.comment">評價商品</div>
                <div style="color:#E43A3C" v-if="item.handleOption.confirm">確認收貨</div>
                <div style="color:#666666">查看詳情</div>
                <!-- <div style="color:#E43A3C" v-if="item.handleOption.refund && (item.orderStatus==1 || item.orderStatus==2)">申請退款 </div> -->
                <div style="color:#E43A3C" v-if=" item.orderStatus==2">申請退款 </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分頁 -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-size="limit" 
        :page-sizes='[10,15]' layout="total,sizes, prev, pager, next, jumper " :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
// import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import {list} from '@/api/order';
import { getToken,removeToken } from '@/utils/auth' // 驗權
import CountDown from 'vue2-countdown'
export default {
  components: {
    CountDown
  },
  data(){
    return{
      orderList:['未付款','待發貨','待收貨','待評價','完成','已取消(系統)','退款'],

         
      list:[],
       currentTime:0,
                startTime:0,
                endTime:0,
      showType:0,
      limit:10,//每頁顯示數
      page:1,//第幾頁
      total:0,//總數
      userId:getToken(),
    }
  },
  mounted(){
   this.getlist(0)
  },
  methods: {
    getlist(e){
      list({userId:getToken(),showType:e,limit:this.limit,page:this.page}).then(response => {
        // console.log(response)
        if (response.errno == 0) {
          this.list=response.data.list
          for(var i =0;i<this.list.length;i++){
            var time1 = Math.floor(new Date(this.list[i].addTime).getTime() )
            var timer = this.list[i].countdown * 60 * 1000  + time1
            var newtime = new  Date().getTime()
            this.list[i].startime = newtime
            this.list[i].endtime = timer
            this.list[i].newtime = newtime
            // console.log(time1)
            // console.log(newtime)
            // console.log(timer - newtime)
            this.list[i].timer = timer - newtime
          }
          this.total = response.data.total
          console.log(this.list)
        } else {
          this.$message({
              type: 'error',
              message: response.errmsg
          })
        }
      })
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getlist(this.showType)
      // if(this.$route.query.isnew == 1){
      //   this.getnewdata()
      // }else{
      //   this.getdata()
      // }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getlist(this.showType)
      // if(this.$route.query.isnew == 1){
      //   this.getnewdata()
      // }else{
      //   this.getdata()
      // }
    },
    btn(e,d,item){
      // 待付款
      if(e == 1){
        this.$router.push({
          path:'/orderpay',
          query:{
            id:d
          }
        })
      }else if(e == 6){
        this.$router.push({
          path:'/orderagain',
          query:{
            id:d
          }
        })
      }else if(e == 2){
        this.$router.push({
          path:'/orderline',
          query:{
            id:d
          }
        })
      }else if(e == 3){
        this.$router.push({
          path:'/orderstart',
          query:{
            id:d
          }
        })
      }else if(e == 4){
        this.$router.push({
          path:'/ordercomment',
          query:{
            id:d
          }
        })
      }else if(e == 5){
        this.$router.push({
          path:'/orderback',
          query:{
            id:d
          }
        })
      }else if(e == 0){
        this.$router.push({
          path:'/orderfinish',
          query:{
            id:d
          }
        })
      }
    },
    changeorder(e){
      this.showType = e
      this.limit = 10
      this.page = 1
      this.getlist(e)
    },
    goorderpay(){
      this.$router.push({path:'/orderpay'})
    },
    goorderline(){
      this.$router.push({path:'/orderline'})
    },
    goorderstart(){
      this.$router.push({path:'/orderstart'})
    },
    goordercomment(){
      this.$router.push({path:'/ordercomment'})
    },
    goorderagain(){
      this.$router.push({path:'/orderagain'})
    },
    goorderfinish(){
      this.$router.push({path:'/orderfinish'})
    },
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 96%;
    margin: 0 auto;
    height: 90px;
  }
  .choose{
    display: flex;
    height: 70px;
    align-items: center;
    text-align: center;
  }
  .select{
    width: 144px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E2D4C2; 
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    cursor:pointer;
  }
  .unselect{
    width: 144px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    cursor:pointer;
  }
  .purchese{
    margin: 0 auto;
    width: 96%;
    border: 1px solid #E5E5E5;
    margin-bottom:22px;
  }
  .purchesetop{
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    height: 37px;
    background: #F5F5F5; 
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .purchesetop div{
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 96%;
    height: 37px;
    background: #F5F5F5; 
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .purchesebottom{
    margin: 0 auto;
    width: 100%;
    display: flex;
    border-bottom: 1px solid #E5E5E5;
  }
  .purimg{
    width: 100px;
    display: flex;
    padding: 0 17px;
    height: 113px;
    align-items: center;
  }
  .purimg img{
    width: 80px;
    height: 80px;
  }
  .purnumber{
    margin: 16px 0;
    font-size: 10px;
    width: 20%;
    box-sizing: border-box;
    height: 80px;
    align-items: center;
    border-right:1px solid #E5E5E5;
  }
  .purnumber>div:nth-child(1){
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    align-items: center;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 15px;
    -webkit-line-clamp: 1;
  }
  .purnumber>div:nth-child(2){
    align-items: center;
    font-size: 13px;
  }
  .purpay{
    margin: 16px 0;
    width: 15%;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right:1px solid #E5E5E5;
  }
  .purlinepay{
    margin: 16px 0;
    width: 25%;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    height: 80px;
    text-align: center;
    justify-content: center;
    border-right:1px solid #E5E5E5;
    display: flex;
    flex-direction:column;
   align-items: center;
  }
  .purlinepay div{    
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    justify-content: center;
    color: #333333;
  }
  .purlinepays{
    width: 17%;
    margin: 16px 0;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    height: 80px;
    text-align: center;
    justify-content: center;
  }
  .purlinepays div{    
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    justify-content: center;
    color: #333333;
  }
  .time{
    display: flex;
    align-items: center;
    width: 100%;
  }
 .time div{    
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #E4393C;
  }
  .time img{    
    padding:0 6px;
    width: 18px;
    height: 18px;
  }
  .purlinepays{
    margin-top: 5px;
  }
  .pagination-container{
  width: 100%;
  box-sizing: border-box;
  margin: 50px 0px;
  /* margin: 100px auto; */
}
.pagination-container>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: #BE9A67;
  color: white;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:hover{
  color: #BE9A67;
}
.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:hover,.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-select .el-input.is-focus .el-input__inner,.pagination-container>>>.el-pagination__sizes .el-input .el-input__inner:hover,.pagination-container>>>.el-select .el-input__inner:focus{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:focus{
  border-color: #BE9A67;
}
.right_list{
  height: 105px;
  display: flex;
  flex-direction:column;
  align-items: center;
}
</style>